{include file="public/header"}
<body>
<div id="app" v-cloak>
    <div class="ht-main">
        <div class="ht-search">
            <el-form :inline="true" size="small">
                <el-form-item label="姓名">
                    <el-input v-model="searchKey.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item label="手机">
                    <el-input v-model="searchKey.tel" placeholder="手机"></el-input>
                </el-form-item>
                <el-form-item label="单号">
                    <el-input v-model="searchKey.express_no" placeholder="单号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" icon="el-icon-search" @click="search">搜索</el-button>
                    <el-button type="" icon="el-icon-refresh" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="ht-tool">
            <div class="ht-tool-left">
<!--                <el-button type="success" size="mini" icon="el-icon-plus" @click="doAdd">添加</el-button>-->
<!--                <el-button type="primary" :disabled="tableSelect.length !== 1" size="mini" icon="el-icon-edit"-->
<!--                           @click="edit(tableSelect[0])">编辑-->
<!--                </el-button>-->
                <el-button type="danger" :disabled="!tableSelect.length" size="mini" icon="el-icon-delete"
                           @click="batchDel('/admin/comment/del')">删除
                </el-button>
            </div>
            <div class="ht-tool-right">
            </div>
        </div>
        <div class="ht-main-body">
            <el-table :data="tableData" border header-row-class-name="ht-table-header"
                      ref="dataTable" @selection-change="handleSelectChange"
                      row-key="id"
                      :tree-props="{children:'children'}"
            >
                <el-table-column align="center" type="selection" width="39"></el-table-column>
                <el-table-column align="center" prop="fa_name" label="发件人"></el-table-column>
                <el-table-column align="center" prop="fa_tel" label="发件电话"></el-table-column>
                <el-table-column align="center" prop="shou_name" label="收件人"></el-table-column>
                <el-table-column align="center" prop="shou_tel" label="收件电话"></el-table-column>
                <el-table-column align="center" prop="goods" label="物品内容"></el-table-column>
                <el-table-column align="center" prop="weight" label="物品重量"></el-table-column>
                <el-table-column align="center" prop="status_name" label="状态"></el-table-column>
                <el-table-column align="center" prop="jie.nick" label="接件员"></el-table-column>
                <el-table-column align="center" width="190px" prop="express_no" label="快递单号"></el-table-column>
    
                <el-table-column align="center" prop="create_time" width="180px" label="添加时间"></el-table-column>
                <el-table-column align="center" label="操作" width="260">
                    <template slot-scope="scope">
                        <el-button @click="info(scope.row)" size="mini" type="primary">详情</el-button>
                        <el-button @click="pai(scope.row)" size="mini" type="primary">派单</el-button>
                        <el-button @click="edit(scope.row)" size="mini" type="primary" icon="el-icon-edit"></el-button>
                        <el-button @click="del(scope.row)" size="mini" type="danger" icon="el-icon-delete"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="ht-main-page">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page"
                        :page-sizes="[1,10, 200, 300, 400]"
                        :page-size="limit"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
            <el-drawer
                    :visible.sync="is_edit"
                    size="98%"
                    :with-header="false"
                    custom-class="ht-drawer-bg"
            >
                <div class="ht-drawer-main">
                    <el-page-header @back="goBack" title="Esc返回" :content="content"></el-page-header>
                    <div class="ht-form">
                        <el-form :model="editData" label-width="120px" size="small">
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="发件人">
                                        <el-input type="text" placeholder="发件人" v-model="editData.fa_name"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="发件人电话">
                                        <el-input type="text" placeholder="发件人电话" v-model="editData.fa_tel"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="发件人地址">
                                        <el-input type="text" :disabled="true" placeholder="发件人地址" :value="editData.fa_province+editData.fa_city+editData.fa_area"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="详细地址">
                                        <el-input type="text" placeholder="详细地址" v-model="editData.fa_address"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="收件人">
                                        <el-input type="text" placeholder="收件人" v-model="editData.shou_name"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="收件人电话">
                                        <el-input type="text" placeholder="收件人电话" v-model="editData.shou_tel"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="收件人地址">
                                        <el-input type="text" :disabled="true" placeholder="收件人地址" :value="editData.shou_province+editData.shou_city+editData.shou_area"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="详细地址">
                                        <el-input type="text" placeholder="详细地址" v-model="editData.shou_address"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="物品内容">
                                        <el-input type="text" placeholder="物品内容" v-model="editData.goods"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="物品重量">
                                        <el-input type="text" placeholder="物品重量" v-model="editData.weight">
                                            <template slot="append">Kg</template>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="快递公司">
                                        <el-select v-model="editData.express_name" placeholder="快递公司">
                                            <el-option :label="item.title" :value="item.title" v-for="item in express_list" :key="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="快递单号">
                                        <el-input type="text" placeholder="快递单号" v-model="editData.express_no">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-form-item>
                                <el-button @click="goBack">取消</el-button>
                                <el-button type="primary" @click="onSubmit">提交</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </el-drawer>
        </div>
        <el-dialog title="派单" :visible.sync="paiData.show" width="80%" top="10%" @close="paiData=false">
                <el-form :model="paiData.data" label-width="120px" size="small">
                    <el-form-item label="接件人">
                        <el-select v-model="paiData.jie_id">
                            <el-option v-for="item in user_list" :key="item.id" :label="item.nick" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="goBack">取消</el-button>
                        <el-button type="primary" :loading="is_loading" @click="paiSubmit">提交</el-button>
                    </el-form-item>
                </el-form>
        </el-dialog>
        <el-dialog :visible.sync="infoData.show" width="60%" top="10" @close="paiData=false">
            <el-card class="box-card">
                <el-descriptions title="收发信息" :column="3" border>
                    <el-descriptions-item label="发件人">{{infoData.fa_name + '('+infoData.fa_tel+')'}}</el-descriptions-item>
                    <el-descriptions-item label="地址">{{infoData.fa_province+infoData.fa_city+infoData.fa_area}} {{infoData.fa_address}}</el-descriptions-item> + '('+infoData.shou_tel+')'}}</el-descriptions-item>
                    <el-descriptions-item label="快递名称">{{infoData.express_name}}</el-descriptions-item>
                    <el-descriptions-item label="收件人">{{infoData.shou_name + '('+infoData.shou_tel+')'}}</el-descriptions-item>
                    <el-descriptions-item label="地址">{{infoData.shou_province+infoData.shou_city+infoData.shou_area}} {{infoData.shou_address}}</el-descriptions-item>
                    <el-descriptions-item label="快递单号">{{infoData.express_no}}</el-descriptions-item>
                </el-descriptions>
            </el-card>
            <div class="ht-m-top10"></div>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>物流信息</span>
                </div>
                <div>
                    <el-timeline :reverse="false" v-if="infoData.log">
                        <el-timeline-item
                                v-for="(activity, index) in infoData.log.info"
                                :key="index"
                                :timestamp="activity.ftime">
                            {{activity.context}}
                        </el-timeline-item>
                    </el-timeline>
                </div>
            </el-card>
        </el-dialog>
    </div>
</div>
{include file="public/common"}
<script>
    let vs ;
    let del_url = "{:url('express.order/del')}";
    let add_url = "{:url('express.order/add')}";
    let index_url = "{:url('express.order/index')}";
    var vm = new Vue({
        el: "#app",
        data: function () {
            return {
                inputValue: '',
                inputVisible: false,
                showDialog: false,
                activeTab: 'first',
                tableData: [],
                goodsList:[],
                is_edit: false,
                editData: {},
                editDataTemp: {},
                content: '编辑',
                total: 0,
                page: 1,
                limit: 10,
                fileManage:false,
                options:[],
                contacts:[{name:'',tel:''}],
                paiData:{},
                infoData:{
                    log:{
                        info:[]
                    }
                },
                user_list:[],
                express_list:[]
            }
        },
        created: function () {
            vs = this;
            vs.getData()
            vs.getUserList()
            vs.getExpressList()
        },
        methods: {
            getExpressList() {
                Api.request("/admin/express.express/all").then(res=>{
                    vs.express_list = res.data
                })
            },
            info(row){
                vs.infoData = JSON.parse(JSON.stringify(row))
                vs.$set(vs.infoData,'show',true)
            },
            pai(row) {
                vs.paiData = JSON.parse(JSON.stringify(row))
                vs.$set(vs.paiData,'show',true)
            },
            paiSubmit() {
                vs.is_loading = true
                Api.request("/admin/express.order/pai",vs.paiData).then(res=>{
                    vs.showSuccessMsgCall(()=>{
                        vs.getData()
                        vs.$set(vs.paiData,'show',false)
                    })
                }).finally(()=>{
                    vs.is_loading = false
                })
            },
            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },
            getUserList() {
                Api.request("/admin/user/all",{search_key: {is_courier:1}}).then(res=>{
                    vs.user_list = res.data
                })
            },
            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                    if (!vs.editData.flag) {
                        vs.editData.flag = []
                    }
                    vs.editData.flag.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
            },

            getArea() {
                $.post("{:url('Area/getAreaList')}",function (res) {
                    if (res.code == 1) {
                        vs.options = res.data
                    }
                })
            },
            getShop() {
                $.post("{:url('shop/all')}",function (res) {
                    if (res.code == 1) {
                        vs.shopList = res.data
                    }
                })
            },
            getAdmin() {
                $.post("{:url('admin/all')}",function (res) {
                    if (res.code == 1) {
                        vs.adminList = res.data
                    }
                })
            },
            getGoods() {
                $.post("{:url('Goods/all')}",function (res) {
                    if (res.code == 1) {
                        vs.goodsList = res.data
                    }
                })
            },
            upSuccess(list) {
                console.log(list)
            },
            imageManageClose(path) {
                this.showDialog = false;
            },
            imageSubmit(path) {
                console.log("path", path)
                this.editDataTemp.image = path[0]
                this.editData.image = path[0]
                this.showDialog = false;
            },
            imageManage() {
                this.showDialog = true;
            },
            uploadSuccess(litpic, value) {
                this.editDataTemp.litpic = litpic
                this.editData.litpic = litpic
            },
            changeStatus: function (e, id) {
                axios.post("{:url('Archives/ArchivesStatus')}", {id: id}).then((res) => {
                    if (res.data.code == 1) {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1000,
                        })
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'error',
                            duration: 1500,
                            onClose: function () {
                                location.reload()
                            }
                        })
                    }
                })
            },
            changeMenuStatus: function (e, id) {
                axios.post("{:url('Auth/menuStatus')}", {id: id}).then((res) => {
                    if (res.data.code == 1) {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1000,
                        })
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'error',
                            duration: 1500,
                            onClose: function () {
                                location.reload()
                            }
                        })
                    }
                })
            },
            onSubmit() {
                var that = this
                vs.editData.contacts = vs.contacts;
                $.post(add_url, that.editData, function (res) {
                    if (res.code == 1) {
                        that.showSuccessMsgCall(function () {
                            that.is_edit = false;
                            that.editData = {};
                            that.getData()
                        })
                    } else {
                        that.showErrorMsg(res.msg)
                    }
                })
            },

            getData: function () {
                var that = this
                that.searchType = {
                    title: 'like',
                    flag: 'like'
                };
                $.post(index_url, {
                    limit: that.limit,
                    page: that.page,
                    search_key: that.searchKey,
                    search_type: that.searchType
                }, function (res) {
                    if (res.code == 1) {
                        that.tableData = res.data.data
                        that.total = res.data.total
                    } else {
                        that.showErrorMsg(res.msg)
                    }
                })
            },
            doAdd: function () {
                this.is_edit = true
                this.content = '添加'
                this.editData = {
                    pid:0
                }
                vs.contacts = []
            },
            edit: function (data) {
                this.is_edit = true
                this.content = '编辑'
                this.editData = data
                vs.contacts = data.contacts
                if (!vs.contacts) {
                    vs.contacts = [{}]
                }
                console.log(data)
            },
            goBack: function () {
                this.is_edit = false
                vs.$set(vs.paiData,'show',false)
            },
            del: function (data) {
                var that = this
                that.$confirm('确定删除么?', '提示', {
                    type: 'warning',
                    lockScroll: false
                }).then(() => {
                    $.post(del_url, {id: data.id}, function (res) {
                        if (res.code == 1) {
                            that.showSuccessMsgCall(function () {
                                that.getData()
                            })
                        } else {
                            that.showErrorMsg(res.msg)
                        }
                    })
                })
            },
            handleSizeChange: function (e) {
                this.limit = e
            },
            handleCurrentChange: function (e) {
                this.page = e
            }
        },
        watch: {
            page(v) {
                this.getData()
            },
            limit() {
                this.getData()
            }
        }
    })
</script>
</body>
</html>
